<template>
  <div class="cvContainer">
    <main>
      <section class="info">
        <h3>黄俊彦</h3>
        <div>
          <span>男</span>
          <span>31岁</span>
          <span>前端开发工程师</span>
          <span>上海</span>
        </div>
        <div>
          <span>手机：15921363438</span>
          <span>邮箱：15921363438@163.com</span>
        </div>
      </section>
      <section class="workExp">
        <h2>工作经历</h2>
        <div class="workItem">
          <h3>
            <span class="company">上海亚派有限公司</span>
            <span>前端负责人</span>
            <span>2021.03 - 至今</span>
          </h3>
          <div><b>职责：</b>对接需求，技术方案设计；项目进度管理；代码审核；前端组件封装</div>
          <h3><b>主要成就和任务</b></h3>
          <ul>
            <li>和UED对接，积极沟通，规划和优化前端组件开发推进；</li>
            <li>解决项目测试中提交的各类问题，保证项目上线交付；</li>
            <li>负责前端结构设计与布局，编写可复用的用户界面组件；</li>
            <li>负责前端页面开发，优化前端页面性能，解决浏览器兼容性问题；</li>
            <li>与后端开发工程师积极合作，完成前端与后端的数据交互；</li>
            <li>前端组件文档撰写和新人培训。</li>
          </ul>
        </div>
        <!-- <div class="workItem">
          <h3>
            <span class="company">策贸科技</span>
            <span>前端开发</span>
            <span>2020.10-2021.02</span>
          </h3>
          <div><b>职责：</b>前端页面开发</div>
          <h3><b>主要成就和任务</b></h3>
          <ul>
            <li>使用Vue+Vant，参与移动端信息管理软件表单页面开发；</li>
            <li>和后端接口联调，解决项目中的细节问题；</li>
            <li>优化产品界面，为用户提供更好的体验。</li>
          </ul>
        </div> -->
      </section>
      <section class="projectSec">
        <h2>项目经历</h2>
        <div class="projectItem">
          <h3>
            <span>DHR（人力资源管理平台）</span>
            <div> </div>
          </h3>
            <div class="skills">
            <span class="prefWord"></span>
            <span class="tag">技术栈：</span>
            <span class="tag">Vue2</span>
            <span class="tag">Element</span>
            <span class="tag">Axios</span>
            <span class="tag">ECharts</span>
            <span class="tag">vxe-table</span>
          </div>
          <h4>项目简介</h4>
          <p>以低代码为驱动的人事信息管理平台，兼具后台管理，门户展示。</p>
          <h3><b>主要贡献</b></h3>
          <ul>
            <li>负责用户自助，经理自助页面组件化开发，保证组件的复用性；</li>
            <li>使用<i>AntV X6</i>图编辑引擎开发流程配置页面，丰富和满足用户在流程节点中的各类业务需求；</li>
            <li>负责薪资帐套、考勤公式等复杂校验和交互要求的系统模块开发和设计；</li>
            <li>处理项目组疑难问题；</li>
            <li>负责<i>低代码</i>平台开发，帮助管理系统数据展示落地，对现有组件进行重构同时推进基础组件开发；</li>
            <li>在团队中积极沟通和合作，负责项目的需求分析、设计和开发，并对项目进展情况进行有效的跟踪和反馈。</li>
          </ul>
        </div>
        <div class="projectItem">
          <h3>
            <span>蓝莓记账</span>
            <div>
              <a href="https://gitee.com/youknowhrt/nuxt-blueberry">源码地址</a>
              <a href="http://39.99.237.46:3004/login?email=15921363438@163.com&code=123456">项目预览</a>
            </div>
          </h3>
          <div class="skills">
            <span class="prefWord"></span>
            <span class="tag">技术栈：</span>
            <span class="tag">Nuxt3</span>
            <span class="tag">Prisma</span>
            <span class="tag">Vant</span>
            <span class="tag">Pinia</span>
            <span class="tag">ECharts</span>
            <span class="tag">MySQL</span>
            <span class="tag">Docker</span>
          </div>
          <h4>项目简介</h4>
          <p>蓝莓记账是一款旨在提供用户友好记账体验的全栈应用。项目分别采用了流行的JavaScript框架Next.js和Nuxt.js进行开发，以展现在相同业务需求下，不同技术栈的实现方式。</p>
          <h3><b>主要贡献</b></h3>
          <ul>
            <li>使用Nuxt3开发的全栈项目，技术栈以Vue3和TypeScript为主；</li>
            <li>设计数据模型，同时通过<i>Prisma</i>对MySQL数据库进行操作和访问；</li>
            <li>对项目中各个页面组件化拆分，将具备重复功能的组件进行复用，减少重复；</li>
            <li>通过jwt登录鉴权，使用Pinia管理用户数据状态；</li>
            <li>UI组件以Vant为主；可视化部分引入Echarts模块。</li>
          </ul>
        </div>

      </section>
      <section class="skillSec">
        <h2>技术栈</h2>
        <ul>
          <li>熟练掌握HTML+CSS。熟练掌握弹性布局、网格布局以及响应式布局，能够快速实现Web端和移动端页面搭建； </li>
          <li>熟悉 Vue ，有多个实际项目开发经验，包括 Vue2 ， Vue3 ， <i>Nuxt3</i>等；</li>
          <li>熟悉 ES6+ 语法，了解 <i>TypeScript</i>；</li>
          <li>熟悉CSS3，包括盒模型、Flex布局、CSS3动画等， Sass预处理器；</li>
          <li>了解Docker以及docker-compose编排。</li>
        </ul>
      </section>
      
      <section class="aboutMe">
        <h2>关于我</h2>
        <p>教育背景：上海第二工业大学 本科</p>
        <p>求职意向： 前端开发</p>
        <p>自我评价： 对前端有着充分的兴趣和自驱动力，具备独立分析并解决问题的能力。注重团队合作，乐于沟通</p>
      </section>
    </main>
  </div>
</template>
<script setup>
</script>

<style scoped lang="scss">
*{
  text-align: left;
  font-size: 14px;
  color: #333;
}
li{
  list-style: none;
}
h1,h2,h3,h4,h5{
  font-weight: normal;
}

$mainColor:rgb(197, 148, 97);
  .cvContainer {
    width: 650px;
    min-height: 978px;
    padding: 4em 3em;
    i{
      color: $mainColor;
    }
    main{
      height:100%;
      display: flex;
      flex-direction: column;
      row-gap: 1em;
      section{
        h2{
          font-size: 16px;
          font-weight: bold;
        }
        h3{
          margin-top: 4px;
        }
        .skills{
          margin-top: 4px;
          .tag{
            &+.tag{
              margin-left: .5em;
              background: red;
              padding: .1em .3em;
              border-radius: 4px;
              background-color: rgba(197, 148, 97, .15);
              color: $mainColor;
            }
          }
        }
        ul{
          margin-top: 4px;
          li{
            position: relative;
            padding-left: 1em;
            &:before{
              content: '';
              position: absolute;
              display: block;
              height: 4px;
              width: 4px;
              border-radius: 50%;
              top: calc(14px*1.5/2);
              left: .3em;
              transform: translateY(-50%);
              background-color: $mainColor;
            }
          }
        }
      }
      .info{
        display: flex;
        flex-direction: column;
        h3{
          font-size: 18px;
          font-weight: bold;
          margin-bottom: .2em;
        }
        div{
          display: flex;
          column-gap: 1em;
          span+span{
            position: relative;
            &:before{
              content: '';
              position: absolute;
              left: -.5em;
              top: 50%;
              transform: translateY(-50%);
              width: 1px;
              height: 1em;
              background-color: #000;}
          }
        }
      }
      .workExp{
        .workItem{
          h3{
            display: flex;
            column-gap: 1em;
            .company{
              font-weight: 600;
            }
          }
        }
      }
      .projectSec{
        .projectItem{
          h3{
            display: flex;
            justify-content: space-between;
            span{
              font-weight: bold;
            }
            div{
              display: flex;
              column-gap: .5em;
              a{
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
  }

</style>
